<template>
  <div class="user-orders">
    <div class="orders-container">
      <h2 class="orders-title">我的订单</h2>

      <el-card class="orders-card">
        <!-- 筛选条件 -->
        <div class="filter-section">
          <el-select v-model="filterStatus" placeholder="订单状态" @change="handleFilterChange" clearable>
            <el-option label="全部" value="" />
            <el-option label="待支付" value="0" />
            <el-option label="已支付" value="1" />
            <el-option label="已取消" value="2" />
          </el-select>

          <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleFilterChange"
              value-format="YYYY-MM-DD"
              :disabled-date="disabledDate"
          />

          <el-button type="primary" @click="fetchOrders">搜索</el-button>
          <el-button @click="resetFilter">重置</el-button>
          <el-button @click="goHome">返回首页</el-button>
        </div>

        <!-- 订单列表 -->
        <div class="orders-list">
          <div v-if="loading" class="loading">
            <el-skeleton :rows="3" animated />
          </div>

          <div v-else-if="orders.length === 0" class="empty">
            <el-empty description="暂无订单" />
          </div>

          <div v-else class="order-items">
            <div v-for="order in orders" :key="order.id" class="order-item">
              <div class="order-header">
                <div class="order-basic-info">
                  <span class="order-no">订单号: {{ order.orderno }}</span>
<!--                  <span class="order-time">下单时间: {{ formatDateTime(order.createtime) }}</span>-->
                </div>
                <span class="order-status" :class="getStatusClass(order.status)">
                  {{ getStatusText(order.status) }}
                </span>
              </div>

              <div class="order-content">
                <div class="concert-info">
                  <div class="concert-details">
                    <h4 class="concert-title">{{ order.concertTitle || '未知演唱会' }}</h4>
                    <p class="concert-artist">艺人: {{ order.artist || '未知艺人' }}</p>
                    <p class="concert-time">演出时间: {{ formatDateTime(order.startdate) }}</p>
                    <p class="concert-venue">场馆: {{ order.venueName || '未知场馆' }}</p>
                    <p class="seat-area">座位区域: {{ order.seatArea || '未知区域' }}</p>
                  </div>
                </div>

                <div class="order-actions">
                  <el-button
                      v-if="order.status === 0"
                      type="primary"
                      @click="goToPay(order)"
                      :loading="payingOrderId === order.id"
                  >
                    立即支付
                  </el-button>
                  <el-button
                      v-if="order.status === 0"
                      @click="cancelOrder(order.id)"
                      :disabled="cancelingOrderId === order.id"
                  >
                    {{ cancelingOrderId === order.id ? '取消中...' : '取消订单' }}
                  </el-button>
                  <el-button
                      v-if="order.status === 1"
                      @click="viewTicket(order.id)"
                  >
                    查看票务
                  </el-button>
                  <el-button
                      v-if="order.status === 2"
                      type="info"
                      @click="viewOrderDetail(order.id)"
                  >
                    订单详情
                  </el-button>
                </div>
              </div>

              <div class="order-footer">
                <span class="order-expire" v-if="order.status === 0">
                  剩余支付时间: {{ getRemainingTime(order.expiretime) }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-container" v-if="orders.length > 0 && total > pageSize">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :page-sizes="[5, 10, 20, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';

const router = useRouter();

const apiClient = axios.create({
  baseURL: 'http://localhost:8083',
  timeout: 10000,
});

// 响应式数据
const orders = ref([]);
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const filterStatus = ref('');
const dateRange = ref([]);
const payingOrderId = ref(null);
const cancelingOrderId = ref(null);

// 获取当前用户ID
function getCurrentUserId() {
  const token = localStorage.getItem("token");
  if (!token) return null;

  try {
    const payload = JSON.parse(atob(token.split('.')[1]));
    return payload.MANAGER_ID || payload.id || null;
  } catch (error) {
    console.error('解析token失败:', error);
    ElMessage.error('登录信息无效，请重新登录');
    return null;
  }
}
// 获取订单列表
async function fetchOrders() {
  const currentUserId = getCurrentUserId();
  if (!currentUserId) {
    ElMessage.warning('请先登录');
    router.push('/login');
    return;
  }

  try {
    loading.value = true;
    const token = localStorage.getItem("token");

    // 构建查询参数
    const params = {
      userId: currentUserId,
      current: currentPage.value,
      size: pageSize.value,
    };

    // 添加状态筛选
    if (filterStatus.value !== '') {
      params.status = filterStatus.value;
    }

    // 添加时间筛选
    if (dateRange.value && dateRange.value.length === 2) {
      params.startDate = new Date(dateRange.value[0]).getTime();
      params.endDate = new Date(dateRange.value[1]).getTime();
    }

    console.log('请求参数:', params);

    const response = await apiClient.get('/order/multiCondition', {
      params,
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });

    if (response.data && response.data.code === 200) {
      orders.value = response.data.data.records || [];
      total.value = response.data.data.total || 0;
      console.log('获取订单成功:', orders.value);
    } else {
      ElMessage.error(response.data.message || '获取订单列表失败');
    }
  } catch (error) {
    console.error('获取订单列表失败:', error);
    if (error.response?.status === 401) {
      ElMessage.error('登录已过期，请重新登录');
      router.push('/login');
    } else {
      ElMessage.error('获取订单列表失败，请检查网络连接');
    }
  } finally {
    loading.value = false;
  }
}

// 跳转到支付页面
function goToPay(order) {
  payingOrderId.value = order.id;

  // 跳转到支付页面，传递演唱会ID和座位ID
  router.push({
    path: `/pay/${order.concertid}`,
    query: {
      seatId: order.seatid,
      orderId: order.id
    }
  });

  // 重置支付状态
  setTimeout(() => {
    payingOrderId.value = null;
  }, 1000);
}

// 取消订单
async function cancelOrder(orderId) {
  try {
    await ElMessageBox.confirm('确定要取消该订单吗？', '取消确认', {
      type: 'warning',
      confirmButtonText: '确定取消',
      cancelButtonText: '再想想'
    });

    cancelingOrderId.value = orderId;
    const token = localStorage.getItem("token");

    const response = await apiClient.delete(`/order/delete/${orderId}`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });

    if (response.data && response.data.code === 200) {
      ElMessage.success('取消成功');
      fetchOrders(); // 重新加载订单列表
    } else {
      ElMessage.error(response.data.message || '取消失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('取消失败:', error);
      ElMessage.error('取消失败');
    }
  } finally {
    cancelingOrderId.value = null;
  }
}

// 查看票务
function viewTicket(orderId) {
  ElMessage.info('跳转到票务详情页面');
  // 这里可以实现跳转到票务详情页面的逻辑
  console.log('查看票务:', orderId);
}

// 查看订单详情
function viewOrderDetail(orderId) {
  ElMessage.info('查看订单详情');
  // 这里可以实现跳转到订单详情页面的逻辑
  console.log('查看订单详情:', orderId);
}

// 筛选条件变化处理
function handleFilterChange() {
  currentPage.value = 1;
  fetchOrders();
}

// 重置筛选条件
function resetFilter() {
  filterStatus.value = '';
  dateRange.value = [];
  currentPage.value = 1;
  fetchOrders();
}

// 返回首页
function goHome() {
  router.push({ name: 'homepage' });
}



// // 图片加载失败处理
// function handleImageError(event) {
//   event.target.src = '/default-concert.jpg';
// }

// 禁用今天之后的日期
function disabledDate(time) {
  return time.getTime() > Date.now();
}

// 计算剩余支付时间
function getRemainingTime(expireTime) {
  if (!expireTime) return '';

  const now = new Date().getTime();
  const expire = new Date(expireTime).getTime();
  const remaining = expire - now;

  if (remaining <= 0) return '已过期';

  const minutes = Math.floor(remaining / (1000 * 60));
  const hours = Math.floor(minutes / 60);
  const remainingMinutes = minutes % 60;

  return `${hours}小时${remainingMinutes}分钟`;
}

// 获取状态文本
function getStatusText(status) {
  const statusMap = {
    0: '待支付',
    1: '已支付',
    2: '已取消'
  };
  return statusMap[status] || '未知状态';
}

// 获取状态样式类
function getStatusClass(status) {
  const classMap = {
    0: 'status-pending',
    1: 'status-paid',
    2: 'status-cancelled'
  };
  return classMap[status] || '';
}

// 格式化日期
function formatDate(dateString) {
  if (!dateString) return '';
  return new Date(dateString).toLocaleDateString('zh-CN');
}

// 格式化日期时间
function formatDateTime(dateString) {
  if (!dateString) return '';
  return new Date(dateString).toLocaleString('zh-CN');
}

// 分页大小变化
function handleSizeChange(newSize) {
  pageSize.value = newSize;
  currentPage.value = 1;
  fetchOrders();
}

// 分页变化
function handlePageChange(newPage) {
  currentPage.value = newPage;
  fetchOrders();
}

onMounted(() => {
  fetchOrders();
});
</script>

<style scoped>
.user-orders {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.orders-container {
  max-width: 1000px;
  margin: 0 auto;
}

.orders-title {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.orders-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 24px;
}

.filter-section {
  display: flex;
  gap: 15px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.order-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  transition: all 0.3s ease;
}

.order-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.order-basic-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-no {
  font-weight: 600;
  color: #303133;
  font-size: 16px;
}

.order-time {
  color: #909399;
  font-size: 14px;
}

.order-status {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.status-pending {
  background: #fdf6ec;
  color: #e6a23c;
  border: 1px solid #f5dab1;
}

.status-paid {
  background: #f0f9ff;
  color: #409eff;
  border: 1px solid #b3d8ff;
}

.status-cancelled {
  background: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fbc4c4;
}

.order-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 20px;
}

.concert-info {
  display: flex;
  gap: 16px;
  flex: 1;
  align-items: flex-start;
}

.concert-img {
  width: 100px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.concert-details {
  flex: 1;
}

.concert-title {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.concert-artist,
.concert-time,
.concert-venue,
.seat-area {
  margin: 6px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.order-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 120px;
}

.order-footer {
  padding-top: 12px;
  border-top: 1px dashed #e4e7ed;
}

.order-expire {
  color: #e6a23c;
  font-size: 14px;
  font-weight: 500;
}

.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.loading, .empty {
  text-align: center;
  padding: 50px 0;
}

@media (max-width: 768px) {
  .user-orders {
    padding: 15px;
  }

  .orders-card {
    padding: 16px;
  }

  .order-content {
    flex-direction: column;
    gap: 16px;
  }

  .concert-info {
    flex-direction: column;
  }

  .concert-img {
    width: 100%;
    height: 180px;
  }

  .order-actions {
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
  }

  .filter-section {
    flex-direction: column;
    align-items: stretch;
  }

  .order-header {
    flex-direction: column;
    gap: 12px;
  }
}
</style>

<!--<template>-->
<!--  <div class="user-orders">-->
<!--    <div class="orders-container">-->
<!--      <h2 class="orders-title">我的订单</h2>-->

<!--      <el-card class="orders-card">-->
<!--        &lt;!&ndash; 筛选条件 &ndash;&gt;-->
<!--        <div class="filter-section">-->
<!--          <el-select v-model="filterStatus" placeholder="订单状态" @change="fetchOrders" clearable>-->
<!--            <el-option label="全部" value="" />-->
<!--            <el-option label="待支付" value="0" />-->
<!--            <el-option label="已支付" value="1" />-->
<!--            <el-option label="已取消" value="2" />-->
<!--          </el-select>-->

<!--          <el-date-picker-->
<!--              v-model="dateRange"-->
<!--              type="daterange"-->
<!--              range-separator="至"-->
<!--              start-placeholder="开始日期"-->
<!--              end-placeholder="结束日期"-->
<!--              @change="fetchOrders"-->
<!--              value-format="YYYY-MM-DD"-->
<!--          />-->

<!--          <el-button type="primary" @click="fetchOrders">搜索</el-button>-->
<!--          <el-button @click="resetFilter">重置</el-button>-->
<!--        </div>-->

<!--        &lt;!&ndash; 订单列表 &ndash;&gt;-->
<!--        <div class="orders-list">-->
<!--          <div v-if="loading" class="loading">加载中...</div>-->

<!--          <div v-else-if="orders.length === 0" class="empty">-->
<!--            <el-empty description="暂无订单" />-->
<!--          </div>-->

<!--          <div v-else class="order-items">-->
<!--            <div v-for="order in orders" :key="order.id" class="order-item">-->
<!--              <div class="order-header">-->
<!--                <span class="order-no">订单号: {{ order.orderNo || order.id }}</span>-->
<!--                <span class="order-status" :class="getStatusClass(order.status)">-->
<!--                  {{ getStatusText(order.status) }}-->
<!--                </span>-->
<!--              </div>-->

<!--              <div class="order-content">-->
<!--                <div class="concert-info">-->
<!--                  <img :src="order.concertPhoto || order.photo" class="concert-img" alt="演唱会海报" />-->
<!--                  <div class="concert-details">-->
<!--                    <h4>{{ order.concertTitle || order.title }}</h4>-->
<!--                    <p>艺人: {{ order.artist }}</p>-->
<!--                    <p>时间: {{ formatDate(order.concertTime || order.startdate) }}</p>-->
<!--                    <p>场馆: {{ order.venue || order.city }}</p>-->
<!--                  </div>-->
<!--                </div>-->

<!--                <div class="order-details">-->
<!--                  <p>数量: {{ order.quantity }}张</p>-->
<!--                  <p class="order-price">总价: ¥{{ order.totalAmount || order.price }}</p>-->
<!--                  <p>下单时间: {{ formatDateTime(order.createTime) }}</p>-->
<!--                </div>-->
<!--              </div>-->

<!--              <div class="order-actions">-->
<!--                <el-button v-if="order.status === 0" type="primary" @click="payOrder(order.id)">-->
<!--                  立即支付-->
<!--                </el-button>-->
<!--                <el-button v-if="order.status === 0" @click="cancelOrder(order.id)">-->
<!--                  取消订单-->
<!--                </el-button>-->
<!--                <el-button v-if="order.status === 1" @click="viewTicket(order.id)">-->
<!--                  查看票务-->
<!--                </el-button>-->
<!--                <el-button v-if="order.status === 2" type="success" @click="viewTicket(order.id)">-->
<!--                  查看详情-->
<!--                </el-button>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

<!--        &lt;!&ndash; 分页 &ndash;&gt;-->
<!--        <div class="pagination-container" v-if="orders.length > 0">-->
<!--          <el-pagination-->
<!--              v-model:current-page="currentPage"-->
<!--              v-model:page-size="pageSize"-->
<!--              :total="total"-->
<!--              :page-sizes="[5, 10, 20, 50]"-->
<!--              layout="total, sizes, prev, pager, next, jumper"-->
<!--              @size-change="handleSizeChange"-->
<!--              @current-change="handlePageChange"-->
<!--          />-->
<!--        </div>-->
<!--      </el-card>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { ref, onMounted, computed } from 'vue';-->
<!--import { ElMessage, ElMessageBox } from 'element-plus';-->
<!--import axios from 'axios';-->

<!--const apiClient = axios.create({-->
<!--  baseURL: 'http://localhost:8083', // 修改为您的后端端口-->
<!--  timeout: 10000,-->
<!--});-->

<!--const orders = ref([]);-->
<!--const loading = ref(false);-->
<!--const currentPage = ref(1);-->
<!--const pageSize = ref(10);-->
<!--const total = ref(0);-->
<!--const filterStatus = ref('');-->
<!--const dateRange = ref([]);-->

<!--// 获取当前用户ID-->
<!--function getCurrentUserId() {-->
<!--  const token = localStorage.getItem("token");-->
<!--  if (!token) return null;-->

<!--  try {-->
<!--    const payload = JSON.parse(atob(token.split('.')[1]));-->
<!--    return payload.MANAGER_ID || payload.userId || null;-->
<!--  } catch (error) {-->
<!--    console.error('解析token失败:', error);-->
<!--    return null;-->
<!--  }-->
<!--}-->

<!--// 获取订单列表-->
<!--async function fetchOrders() {-->
<!--  try {-->
<!--    loading.value = true;-->
<!--    const token = localStorage.getItem("token");-->

<!--    // 构建查询参数 - 根据后端 multiCondition 接口参数-->
<!--    const params = {-->
<!--      current: currentPage.value,-->
<!--      size: pageSize.value,-->
<!--    };-->

<!--    // 添加状态筛选-->
<!--    if (filterStatus.value !== '') {-->
<!--      params.keyword = filterStatus.value; // 使用keyword参数传递状态-->
<!--    }-->

<!--    // 添加时间筛选-->
<!--    if (dateRange.value && dateRange.value.length === 2) {-->
<!--      params.startDate = new Date(dateRange.value[0]).getTime();-->
<!--      params.endDate = new Date(dateRange.value[1]).getTime();-->
<!--    }-->

<!--    // 调用多条件查询接口-->
<!--    const response = await apiClient.get('/order/multiCondition', {-->
<!--      params,-->
<!--      headers: {-->
<!--        'Authorization': `Bearer ${token}`-->
<!--      }-->
<!--    });-->

<!--    if (response.data && response.data.code === 200) {-->
<!--      orders.value = response.data.data.records || [];-->
<!--      total.value = response.data.data.total || 0;-->
<!--    } else {-->
<!--      ElMessage.error(response.data.message || '获取订单列表失败');-->
<!--    }-->
<!--  } catch (error) {-->
<!--    console.error('获取订单列表失败:', error);-->
<!--    ElMessage.error('获取订单列表失败');-->
<!--  } finally {-->
<!--    loading.value = false;-->
<!--  }-->
<!--}-->

<!--// 重置筛选条件-->
<!--function resetFilter() {-->
<!--  filterStatus.value = '';-->
<!--  dateRange.value = [];-->
<!--  currentPage.value = 1;-->
<!--  fetchOrders();-->
<!--}-->

<!--// 支付订单-->
<!--async function payOrder(orderId) {-->
<!--  try {-->
<!--    await ElMessageBox.confirm('确定要支付该订单吗？', '支付确认', {-->
<!--      type: 'warning'-->
<!--    });-->

<!--    const token = localStorage.getItem("token");-->
<!--    // 使用编辑接口来更新订单状态-->
<!--    const orderData = {-->
<!--      id: orderId,-->
<!--      status: 1 // 已支付状态-->
<!--    };-->

<!--    const response = await apiClient.put('/order/edit', orderData, {-->
<!--      headers: {-->
<!--        'Authorization': `Bearer ${token}`-->
<!--      }-->
<!--    });-->

<!--    if (response.data && response.data.code === 200) {-->
<!--      ElMessage.success('支付成功');-->
<!--      fetchOrders();-->
<!--    } else {-->
<!--      ElMessage.error(response.data.message || '支付失败');-->
<!--    }-->
<!--  } catch (error) {-->
<!--    if (error !== 'cancel') {-->
<!--      console.error('支付失败:', error);-->
<!--      ElMessage.error('支付失败');-->
<!--    }-->
<!--  }-->
<!--}-->

<!--// 取消订单-->
<!--async function cancelOrder(orderId) {-->
<!--  try {-->
<!--    await ElMessageBox.confirm('确定要取消该订单吗？', '取消确认', {-->
<!--      type: 'warning'-->
<!--    });-->

<!--    const token = localStorage.getItem("token");-->
<!--    // 使用软删除接口或编辑接口-->
<!--    const response = await apiClient.delete(`/order/delete`, {-->
<!--      params: { id: orderId },-->
<!--      headers: {-->
<!--        'Authorization': `Bearer ${token}`-->
<!--      }-->
<!--    });-->

<!--    if (response.data && response.data.code === 200) {-->
<!--      ElMessage.success('取消成功');-->
<!--      fetchOrders();-->
<!--    } else {-->
<!--      ElMessage.error(response.data.message || '取消失败');-->
<!--    }-->
<!--  } catch (error) {-->
<!--    if (error !== 'cancel') {-->
<!--      console.error('取消失败:', error);-->
<!--      ElMessage.error('取消失败');-->
<!--    }-->
<!--  }-->
<!--}-->

<!--// 查看票务/订单详情-->
<!--async function viewTicket(orderId) {-->
<!--  try {-->
<!--    const token = localStorage.getItem("token");-->
<!--    const response = await apiClient.get(`/order/getorderbyid/${orderId}`, {-->
<!--      headers: {-->
<!--        'Authorization': `Bearer ${token}`-->
<!--      }-->
<!--    });-->

<!--    if (response.data && response.data.code === 200) {-->
<!--      const orderDetail = response.data.data;-->
<!--      ElMessage.success(`订单详情：${orderDetail.concertTitle || orderDetail.title}`);-->
<!--      // 这里可以跳转到订单详情页面或显示模态框-->
<!--      console.log('订单详情:', orderDetail);-->
<!--    } else {-->
<!--      ElMessage.error('获取订单详情失败');-->
<!--    }-->
<!--  } catch (error) {-->
<!--    console.error('获取订单详情失败:', error);-->
<!--    ElMessage.error('获取订单详情失败');-->
<!--  }-->
<!--}-->

<!--// 获取状态文本-->
<!--function getStatusText(status) {-->
<!--  const statusMap = {-->
<!--    0: '待支付',-->
<!--    1: '已支付',-->
<!--    2: '已取消'-->
<!--  };-->
<!--  return statusMap[status] || '未知状态';-->
<!--}-->

<!--// 获取状态样式类-->
<!--function getStatusClass(status) {-->
<!--  const classMap = {-->
<!--    0: 'status-pending',-->
<!--    1: 'status-paid',-->
<!--    2: 'status-completed',-->
<!--    3: 'status-cancelled'-->
<!--  };-->
<!--  return classMap[status] || '';-->
<!--}-->

<!--// 格式化日期-->
<!--function formatDate(dateString) {-->
<!--  if (!dateString) return '';-->
<!--  return new Date(dateString).toLocaleDateString('zh-CN');-->
<!--}-->

<!--// 格式化日期时间-->
<!--function formatDateTime(dateString) {-->
<!--  if (!dateString) return '';-->
<!--  return new Date(dateString).toLocaleString('zh-CN');-->
<!--}-->

<!--// 分页大小变化-->
<!--function handleSizeChange(newSize) {-->
<!--  pageSize.value = newSize;-->
<!--  currentPage.value = 1;-->
<!--  fetchOrders();-->
<!--}-->

<!--// 分页变化-->
<!--function handlePageChange(newPage) {-->
<!--  currentPage.value = newPage;-->
<!--  fetchOrders();-->
<!--}-->

<!--onMounted(() => {-->
<!--  fetchOrders();-->
<!--});-->
<!--</script>-->

<!--<style scoped>-->
<!--.user-orders {-->
<!--  padding: 20px;-->
<!--  background-color: #f5f7fa;-->
<!--  min-height: calc(100vh - 60px);-->
<!--}-->

<!--.orders-container {-->
<!--  max-width: 1000px;-->
<!--  margin: 0 auto;-->
<!--}-->

<!--.orders-title {-->
<!--  text-align: center;-->
<!--  margin-bottom: 30px;-->
<!--  color: #303133;-->
<!--  font-size: 24px;-->
<!--}-->

<!--.orders-card {-->
<!--  border-radius: 8px;-->
<!--  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);-->
<!--  padding: 20px;-->
<!--}-->

<!--.filter-section {-->
<!--  display: flex;-->
<!--  gap: 15px;-->
<!--  margin-bottom: 20px;-->
<!--  flex-wrap: wrap;-->
<!--  align-items: center;-->
<!--}-->

<!--.order-items {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  gap: 20px;-->
<!--}-->

<!--.order-item {-->
<!--  border: 1px solid #e4e7ed;-->
<!--  border-radius: 6px;-->
<!--  padding: 20px;-->
<!--  background: #fff;-->
<!--  transition: box-shadow 0.3s;-->
<!--}-->

<!--.order-item:hover {-->
<!--  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);-->
<!--}-->

<!--.order-header {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  margin-bottom: 15px;-->
<!--  padding-bottom: 10px;-->
<!--  border-bottom: 1px solid #f0f0f0;-->
<!--}-->

<!--.order-no {-->
<!--  font-weight: bold;-->
<!--  color: #303133;-->
<!--}-->

<!--.order-status {-->
<!--  padding: 4px 8px;-->
<!--  border-radius: 4px;-->
<!--  font-size: 12px;-->
<!--  font-weight: bold;-->
<!--}-->

<!--.status-pending {-->
<!--  background: #fdf6ec;-->
<!--  color: #e6a23c;-->
<!--}-->

<!--.status-paid {-->
<!--  background: #f0f9ff;-->
<!--  color: #409eff;-->
<!--}-->

<!--.status-completed {-->
<!--  background: #f0f9eb;-->
<!--  color: #67c23a;-->
<!--}-->

<!--.status-cancelled {-->
<!--  background: #fef0f0;-->
<!--  color: #f56c6c;-->
<!--}-->

<!--.order-content {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  margin-bottom: 15px;-->
<!--  gap: 20px;-->
<!--}-->

<!--.concert-info {-->
<!--  display: flex;-->
<!--  gap: 15px;-->
<!--  flex: 1;-->
<!--}-->

<!--.concert-img {-->
<!--  width: 80px;-->
<!--  height: 100px;-->
<!--  object-fit: cover;-->
<!--  border-radius: 4px;-->
<!--}-->

<!--.concert-details h4 {-->
<!--  margin: 0 0 8px 0;-->
<!--  color: #303133;-->
<!--  font-size: 16px;-->
<!--}-->

<!--.concert-details p {-->
<!--  margin: 4px 0;-->
<!--  color: #606266;-->
<!--  font-size: 14px;-->
<!--}-->

<!--.order-details {-->
<!--  text-align: right;-->
<!--  min-width: 150px;-->
<!--}-->

<!--.order-details p {-->
<!--  margin: 4px 0;-->
<!--  color: #606266;-->
<!--  font-size: 14px;-->
<!--}-->

<!--.order-price {-->
<!--  font-weight: bold;-->
<!--  color: #ff6700;-->
<!--  font-size: 16px;-->
<!--}-->

<!--.order-actions {-->
<!--  text-align: right;-->
<!--  display: flex;-->
<!--  gap: 10px;-->
<!--  justify-content: flex-end;-->
<!--}-->

<!--.pagination-container {-->
<!--  margin-top: 30px;-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--}-->

<!--.loading, .empty {-->
<!--  text-align: center;-->
<!--  padding: 50px 0;-->
<!--}-->

<!--@media (max-width: 768px) {-->
<!--  .order-content {-->
<!--    flex-direction: column;-->
<!--    gap: 15px;-->
<!--  }-->

<!--  .order-details {-->
<!--    text-align: left;-->
<!--  }-->

<!--  .concert-info {-->
<!--    flex-direction: column;-->
<!--  }-->

<!--  .concert-img {-->
<!--    width: 100%;-->
<!--    height: 200px;-->
<!--  }-->

<!--  .order-actions {-->
<!--    flex-direction: column;-->
<!--  }-->

<!--  .filter-section {-->
<!--    flex-direction: column;-->
<!--    align-items: stretch;-->
<!--  }-->
<!--}-->
<!--</style>-->